<template>
  <div id="search" class="page">
    <el-tabs v-model="activeName" style="margin-top:20px;">
      <el-tab-pane label="单曲" name="first">
        <p style="font-size:14px; margin:10px 0px 10px 0px;">搜索到
          <span style="color:deepskyblue;">{{param}}</span>相关的歌曲
          <el-button type="primary" icon="el-icon-caret-right" style="margin-left:65%; ">播放</el-button>
        </p>
        <el-table ref="multipleTable" :data="musicList" tooltip-effect="dark" width="100%"
                  @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column label="歌曲名称" width="400">
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click="addPlayList(scope.row)">
                <span v-for="(auther,i) in scope.row.artists">
                  {{auther.name}} <i v-if="i < scope.row.artists.length - 1">、</i>
                </span>
                - {{ scope.row.name}}</a>
            </template>
          </el-table-column>

          <el-table-column label="专辑" width="500">
            <template slot-scope="scope"> 《{{scope.row.album.name}}》 </template>
          </el-table-column>
          <el-table-column label="时长" width="115">
            <template slot-scope="scope">{{(scope.row.duration / 1000 / 60).toFixed(2)}}</template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="second">
        <p style="font-size:14px; margin:20px 0px 20px 0px;">搜索到
          <span style="color:deepskyblue;">{{param}}</span>相关的歌单
        </p>
        <el-table :data="musicBanner" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column label="歌单名" width="500">
             <template slot-scope="scope">
               <a href="">
                 <div class="content" style="align-items: center">
                     <div class="image" style="width:50px;height: 50px;">
                       <img :src="scope.row.coverImgUrl" :title="scope.row.description" width="100%;" class="image">
                     </div>
                     <div style="margin-left:20px;">
                       {{scope.row.name}}
                     </div>
                 </div>
               </a>
             </template>
          </el-table-column>
          <el-table-column prop="creator.nickname" label="创建人" width="250"></el-table-column>
          <el-table-column label="收藏">
            <template slot-scope="scope">
                  {{(scope.row.playCount / 10000).toFixed(2)}} 万
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="MV" name="third">
        <p style="font-size:14px; margin:20px 0px 20px 0px;">搜索到
          <span style="color:deepskyblue;">{{param}}</span>相关的MV
        </p>
        <div class="content">
            <div class="item" v-for="(element,index) in mv" :key="index">
              <a href="">
                <div>
                  <img :src="element.cover" :title="element.name" width="100%">
                </div>
                <p>{{element.name}}</p>
                <p>{{element.artistName}}</p>
              </a>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import functions from "../../utils/functions";

export default {
  name: "search",
  data(){
      return{
          musicList:[],
          mv:[],
          activeName:'first',
          param:'',
          musicBanner:[],
      }
  },
  methods:{
      getMusicList() { // 获取歌单
        this.$get('https://autumnfish.cn/search?type=1000&keywords=' + this.param).then(result =>{
          this.musicBanner = result.result.playlists;
        });
      },
      getMusic(){ //获取单曲
        this.$get('https://autumnfish.cn/search?type=1&keywords=' + this.param).then(result =>{
          this.musicList = result.result.songs;
        });
      },
      getMV(){
        this.$get('https://autumnfish.cn/search?type=1004&keywords=' + this.param).then(result =>{
          this.mv = result.result.mvs;
        });
      },
      addPlayList(item){
        let names = '';
        item.artists.forEach(auther => {names += auther.name});
        let data = {
            singName:item.name,
            singerName:names,
            singId:item.id,
        }
        console.log(data);
        functions.savePlayList(data);
        this.$notify({ title: '成功', message: '已添加到播放列表', type: 'success' });
      },
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
  },
  created() {
      this.param = this.$route.params.id;
      this.getMusicList();
      this.getMusic();
      this.getMV();
  }
}
</script>

<style scoped>
  #search .content{
      flex-wrap: wrap;
  }
  #search .item{
      width:200px;
      margin:10px 5px 10px 5px;
  }
</style>
